<template>
    <div class="advertisement" >
        <div class="lunboOne">
            <el-carousel ref="carousel" height="100%" :autoplay="false" @change="carouselChange">
                <el-carousel-item v-for="(item,index) in bizPromoAdsVideoList" :key="index">
                    <video :ref="'video'+index" :src="item.videoUrl" autoplay muted @ended="handleVideoEnded"></video>
                    <img v-if="!isMuted" @click="clickShengYin(index)" class="shenYin" src="../assets/img/shengyin.png" alt="">
                    <img v-else @click="clickShengYin(index)" class="shenYin" src="../assets/img/shengyinguanbi.png" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="company">
            <!-- <img src="../assets/img/cong.png" alt="">
            <span>少女虫拍客空间</span> -->
            <img src="../assets/img/prodectName.png" alt="">
        </div>
        <div class="lunboTwo" @click="toPage">
            <el-carousel ref="carousels" height="100%" :autoplay="true" :interval="5000"> 
                <el-carousel-item v-for="(item,index) in list" :key="index">
                    <img :src="item" alt="contain">
                </el-carousel-item>
            </el-carousel>
            <div class="tips">点击开始拍照</div>
            <div class="guangGao">广告</div>
        </div>
    </div>
</template>

<script>
import {advertisementList} from '../server/api'
import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState([
            //必须带引号
            'token'
        ])
    },
    data(){
        return {
            images:'',
            videos:'',
            // 轮播图 当前index
            currentVideoIndex:0,
            // 数据列表
            list:[],
            // 当前是否静音
            isMuted:true,
            // 公共图片列表
            bizPromoAdsImgList:[],
            // 视频列表
            bizPromoAdsVideoList:[],
        }
    },
    methods:{
        // 跳转首页
        toPage(){
            // 判断是否登录
            if(this.token){
                // 已登录
                this.$router.push('/theme')
            }else{
                // 未登录
                this.$router.push('/index')
            }
        },
        // 播放结束 
        handleVideoEnded(event) {
            // 暂停当前视频
            this.$refs['video'+this.currentVideoIndex][0].pause();
            // 设置当前静音
            this.isMuted = true;
            // 清空进度条
            event.target.currentTime = 0;
            const nextVideoIndex = this.currentVideoIndex + 1;
            if (nextVideoIndex < this.bizPromoAdsVideoList.length) {
                this.currentVideoIndex = nextVideoIndex
            }else{
                this.currentVideoIndex = 0;
            }
            this.$refs.carousel.setActiveItem(this.currentVideoIndex);
            this.$refs.carousels.setActiveItem(this.currentVideoIndex);
            console.log(this.currentVideoIndex)
            // 设置开始播放
            this.$refs['video'+this.currentVideoIndex][0].play();
        },
        // 获取广告列表接口
        getadvertisementList(){
            advertisementList().then(res=>{
                this.bizPromoAdsImgList = res.data.bizPromoAdsImgList;
                this.bizPromoAdsVideoList = res.data.bizPromoAdsVideoList;
                // 判断当前类型
                if(this.bizPromoAdsVideoList[0].mediaType == 1){
                    this.list = this.bizPromoAdsVideoList[0].imageUrlList;
                }else{
                    this.list = this.bizPromoAdsImgList;
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        // 幻灯片切换
        carouselChange(newVal,oldVal){
            console.log(newVal)
            console.log(oldVal)
            // 判断当前和上一个视频的类型区别
            if(this.bizPromoAdsVideoList[newVal].mediaType == this.bizPromoAdsVideoList[oldVal].mediaType){
                // 类型相同
                // 判断当前选中视频类型
                if(this.bizPromoAdsVideoList[newVal].mediaType == 1){
                    this.list = this.bizPromoAdsVideoList[newVal].imageUrlList;
                }
            }else{
                // 类型不同
                if(this.bizPromoAdsVideoList[newVal].mediaType == 1){
                    this.list = this.bizPromoAdsVideoList[newVal].imageUrlList;
                }else{
                    this.list = this.bizPromoAdsImgList;
                }
            }
        },
        // 点击视频
        // clickVideo(index){
        //     // 设置开始播放
        //     this.$refs['video'+this.currentVideoIndex][0].play();
        // },
        // 点击声音
        clickShengYin(){
            if(this.$refs['video'+this.currentVideoIndex][0].muted == true){
                // 打开声音
                this.$refs['video'+this.currentVideoIndex][0].muted = false;
                this.isMuted = false;
                this.$refs['video'+this.currentVideoIndex][0].volume = 0.1
            }else{
                // 关闭声音
                this.$refs['video'+this.currentVideoIndex][0].muted = true;
                this.isMuted = true;
            }
        },
    },
    mounted(){
        this.getadvertisementList()
        // setTimeout(()=>{
        //     this.$refs['video'+this.currentVideoIndex][0].play();
        // },5000)
    },
}
</script>

<style lang="less" scoped>
.advertisement{
    width: 100%;
    height: 1920px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .lunboOne{
        width: 100%;
        height: 608px;
        flex: none;
        position: relative;
        .shenYin{
            width: 50px;
            height: 50px;
            position: absolute;
            z-index: 999;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
        }
    }
    .company{
        width: 100%;
        height: 93px;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #000;
        span{
            font-size: 36px;
            color: #FFFFFF;
            margin-left: 13px;
        }
        img{
            width: 440px;
            height: 64px;
        }
    }
    .lunboTwo{
        width: 100%;
        flex: 1;
        position: relative;
        img{
            width: 100%;
            height: 100%;
            object-fit:cover;
        }
        .tips{
            // position: absolute;
            // font-size: 40px;
            // color: #FFFFFF;
            // text-align: center;
            // left: 0;
            // right: 0;
            // margin: 0 auto;
            // bottom: 259px;
            // z-index: 999;
            // text-align: center;
            position: absolute;
            // top: 50%;
            bottom: 167px;
            left: 0;
            right: 0;
            margin: 0 auto;
            // transform: translate(-50%, -50%);
            width: 590px;
            height: 136px;
            line-height: 136px;
            text-align: center;
            color: #fff;
            font-size: 48px;
            // text-transform: uppercase; 
            cursor: pointer;
            // background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background: linear-gradient(90deg, #9997FF, #FFA3DD, #FFC088,#9997FF);

            // background: #9997FF;
            background-size: 400%;
            border-radius: 64px;
            z-index: 999;
            animation: animate 1.5s linear infinite;
            box-shadow: 8px 10px 10px 0px #03009233;
        }
        .guangGao{
            width: 60px;
            height: 30px;
            font-size: 16px;
            color: #FFFFFF;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 2px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            right: 26px;
            bottom: 34px;
            z-index: 99;
        }
    }
    /deep/.el-carousel {
        height: 100%;
        .el-carousel__container {
            height: 100%;
            video{
                width: 100%;
                height: 100%;
            }
        }
        .el-carousel__indicators{
            display: none;
        }
        .el-carousel__arrow{
            display: none;
        }
    }
    @keyframes animate {
        0% {
            // background-position: 0%;
            transform: scale(0.9);
        }
        50% {
            transform: scale(1);
        }
        100% {
            // background-position: 400%;
            transform: scale(0.9);
        }
    }
}
</style>